// 理发店核销情况排名   
$(function(){
	// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main1'));
    // 指定图表的配置项和数据
    var option = {
	    grid: {
	    	top:'0',
            left: '0',   //图表距边框的距离
            right: '10',
            bottom: '0',
            containLabel: true
        },
	    xAxis: {
	        type: 'value',
	        max:'600',
	        /*boundaryGap: [0, 0.01],*/
	        axisTick:{
                show:false  //去掉y轴刻度线
            },
            splitLine:{
                show:false
            },
            axisLine:{
            	show:false
				/*lineStyle:{
					color:'#F4F4F3', // x坐标轴的轴线颜色
					width:0, //这里是坐标轴的宽度,为0就是不显示
				}*/
			},
			axisLabel : {
				show:false
                /*textStyle: {
                    fontSize: 16,
                    color:'#666'
                }*/
            },
	    },
	    yAxis: {
	        type: 'category',
	        data: ['党员','优抚家庭','孤老家庭孤老家庭孤老家庭孤老家庭','失孤家庭','单亲家庭','低保家庭','犯罪前科'],
	        axisTick:{
                show:false  //去掉y轴刻度线
            },
            axisLine:{
            	show:false
				/*lineStyle:{
					color:'#F4F4F3', // y坐标轴的轴线颜色
					width:1, //这里是坐标轴的宽度,为0就是不显示
				}*/
			},
			/* axisLabel : {
                textStyle: {
                    fontSize:12,
                    color:'#333'
                }
            }, */
			axisLabel: {  
				textStyle: {
				    fontSize:12,
				    color:'#333'
				},
			    interval: 0,  
				formatter: function (params){   //文字超出用...代替
					// console.log("params")
					// console.log(params)
					if( params.length > 6)
						return params.substring(0,6) + '...';
					else
						return params;
				}
			    /* formatter: function(value) {
			        if (value.length > 6) { 
						return value.substring(0, 6) + "..."; 
					} else { 
						return value; 
					}
				} */
		    } 
	    },
	    series: [
	        {
	            type: 'bar',
	            barWidth: '16',
				
	            showBackground: true,
		        backgroundStyle: {  
		        	color: 'rgba(28, 147, 153, 0.06)', 
		        	barBorderRadius:[8,8,8,8],
		        },
	            itemStyle : {
	            	normal : {
	            		barBorderRadius:[8,8,8,8],
	            		color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{
	            			offset: 0,
	            			color: '#3BC3C7'
	            		}, {
	            			offset: 1,
	            			color: '#1C9399'
	            		}]),
	            		label: {		                       
	            			show: true,//是否展示
	            			position: 'right',
	            			textStyle: {
	            				fontSize: 12,
	            				color:'#333',
	            			}		                    
	            		},
	            	}
	            },
				data: [100, 200, 300, 400,150,550,360],
	        }
	    ]
	};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
	$("div.data-main").css("width","auto");
	$(window).resize(function() {
	   myChart.resize();
	});
	/* var myChart = echarts.init(document.getElementById('echartsShow')); */
	// myChart.setOption(configOption(echartsData));
/**
* @title 鼠标经过显示剩余内容
*/
	myChart.on('mouseover', function (params) {  
		// console.log("第一个图表");
		// console.log(params);
		if( params.componentType == 'yAxis' ){
			var content = $('#content');
			content.html(params.value);
		  content.css('left', params.event.event.layerX+10);
		  content.css('top', params.event.event.layerY+20);
		  content.show();
		}
	});
	/**
	* @title 鼠标移出隐藏用 ... 代替
	*/
	myChart.on('mouseout', function (params) {
		$('#content').hide();
	})
	
	
})

// 缝纫店核销情况排名   
$(function(){
	// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main2'));
    // 指定图表的配置项和数据
    var option = {
	    grid: {
	    	top:'0',
            left: '0',   //图表距边框的距离
            right: '10',
            bottom: '0',
            containLabel: true
        },
	    xAxis: {
	        type: 'value',
	        max:'600',
	        /*boundaryGap: [0, 0.01],*/
	        axisTick:{
                show:false  //去掉y轴刻度线
            },
            splitLine:{
                show:false
            },
            axisLine:{
            	show:false
				/*lineStyle:{
					color:'#F4F4F3', // x坐标轴的轴线颜色
					width:0, //这里是坐标轴的宽度,为0就是不显示
				}*/
			},
			axisLabel : {
				show:false
                /*textStyle: {
                    fontSize: 16,
                    color:'#666'
                }*/
            },
	    },
	    yAxis: {
	        type: 'category',
	        data: ['党员','优抚家庭','孤老家庭孤老家庭','失孤家庭','单亲家庭','低保家庭','犯罪前科'],
	        axisTick:{
                show:false  //去掉y轴刻度线
            },
            axisLine:{
            	show:false
				/*lineStyle:{
					color:'#F4F4F3', // y坐标轴的轴线颜色
					width:1, //这里是坐标轴的宽度,为0就是不显示
				}*/
			},
			axisLabel : {
                textStyle: {
                    fontSize:14,
                    color:'#333'
                }
            },
	    },
	    series: [
	        {
	            type: 'bar',
	            barWidth: '16',
				
	            showBackground: true,
		        backgroundStyle: {  
		        	color: 'rgba(28, 147, 153, 0.06)', 
		        	barBorderRadius:[8,8,8,8],
		        },
	            itemStyle : {
	            	normal : {
	            		barBorderRadius:[8,8,8,8],
	            		color: new echarts.graphic.LinearGradient(0, 0, 1, 0,[{
	            			offset: 0,
	            			color: '#3BC3C7'
	            		}, {
	            			offset: 1,
	            			color: '#1C9399'
	            		}]),
	            		label: {		                       
	            			show: true,//是否展示
	            			position: 'right',
	            			textStyle: {
	            				fontSize: 14,
	            				color:'#333',
	            			}		                    
	            		},
	            	}
	            },
				data: [100, 200, 300, 400,150,550,360],
	        }
	    ]
	};

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
	$("div.data-main").css("width","auto");
	$(window).resize(function() {
	   myChart.resize();
	});
})

// 优惠券使用年龄分布
$(function() {
	var myChart = echarts.init(document.getElementById('main3'));
	var option = {
		color: ['#5B8FF9', '#42C3AF','#1C9399', '#FFC15E','#FA675C','#30A4FF'],
		legend: {
			selectedMode: false, //取消图例上的点击事件
			orient: 'vertical',
			right: '0',
			y: 'center',
			itemWidth: 8,
			itemHeight: 8,
			itemGap: 9, //图例之间的间距 
			textStyle: {
				color: '#333',
				fontSize: 12,
				padding: [4, 0, 0, 10]
			},
		},
		series: [{
			name: '',
			type: 'pie',
			radius: 100,
			center: ['40%', 'center'],
			avoidLabelOverlap: false,
			hoverAnimation:false,   //  防止点击变大事件   
			
			itemStyle: {
				normal: {
					label: {
						show: true,
						formatter: function(data) {
							return data.percent.toFixed(0) + "%";
						},
						textStyle: {
							color: '#333'
						},
						padding: [0, 0], //文字和图的边距
						rich: {
							b: { //value 文字样式
								fontSize: 12,
								lineHeight: 60,
								align: 'center',
								color: '#333'
							},
						}
					},
					show: true,
					borderColor: '#fff',
					borderWidth: 1,
				},
			},


			data: [{
					value: 335,
					name: '65-70岁'
				},
				{
					value: 250,
					name: '71-75岁',
				},{
					value: 335,
					name: '76-80岁'
				},
				{
					value: 335,
					name: '81-85岁'
				},
				{
					value: 335,
					name: '86-90岁'
				},{
					value: 335,
					name: '90岁以上'
				},
			],
		}],
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	$("div.data-main").css("width","auto");
	$(window).resize(function() {
	   myChart.resize();
	});
})


// 近6月优惠券使用率
$(function(){
	// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main4'));
    // 指定图表的配置项和数据
    var option = {
		legend: {
			selectedMode: false, //取消图例上的点击事件
			left: '0',
			itemWidth: 8,
			itemHeight: 8,
			itemGap: 20, //图例之间的间距 
			textStyle: {
				color: '#999',
				fontSize: 12,
				padding: [2, 0, 0, 5]
			},
			data:['发放总数','核销总数','核销率']
		},
        grid: {
        	top:'50',
            left: '0',   //图表距边框的距离
            right: '0',
            bottom: '0',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            /*boundaryGap: false,*/
            
            axisLabel: {
                textStyle: {
                	color:'#333',
                    fontSize: 12,
    			},
            },
            axisTick:{
                show:false  //去掉y轴刻度线
            },
            
            axisLine:{
                show:true,
            	lineStyle: {
            		color: 'rgba(0, 0, 0, 0.45)',
            		width: '1'
            	}
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: [
    	    {
    	    	type: 'value',
    	    	min:0,
                max:600,
                interval:200,
    	        splitLine: {
                    show: true ,
    	            lineStyle: {
    	            	color: 'rgba(0, 0, 0, 0.15)',
    	            	width: '1'
    	            }
                },
                axisLabel: {
                	textStyle: {
                		color:'#333',
                        fontSize: 12,
    				},
    	            
                },
                
                axisTick:{
                    show:false  //去掉y轴刻度线
                },
    	        //坐标轴颜色
                axisLine:{
                    show:false,
                    /* lineStyle:{
                        color:'rgba(0, 0, 0, 0.15)',
                    	width:'1'
                    } */
                },
    	    }
        ],
        series: [{
            name:'发放总数',
            type:'bar',
            barWidth: '20',
            itemStyle : { 
    			normal : {
    				barBorderRadius:[2, 2, 0, 0],
    				label: {		                       
    					show: true,//是否展示
    					position: 'top',
    					textStyle: {
    						fontSize: 12,		     
    						color:'#333',
    					}		                    
    				},
    				color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 1,
                        color: '#1C9399'
                    }, {
                        offset: 0.3,
                        color: '#3CC5C9'
                    }]),
    			}
    		},
            data: [320, 490, 320, 450, 490, 320]
        },{
            name:'核销总数',
            type:'bar',
            barWidth: '20',
            itemStyle : { 
    			normal : {
    				barBorderRadius:[2, 2, 0, 0],
    				label: {		                       
    					show: true,//是否展示
    					position: 'top',
    					textStyle: {
    						fontSize: 12,		     
    						color:'#333',
    					}		                    
    				},
    				color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 1,
                        color: '#FA675C'
                    }, {
                        offset: 0.3,
                        color: '#FDA095'
                    }]),
    			}
    		},
            data: [110, 490, 320, 450, 490, 320]
        },{
            name:'核销率',
            type:'line',
			symbol: 'none',
            itemStyle : { 
    			normal : {
    				barBorderRadius:[2, 2, 0, 0],
    				label: {		                       
    					show: true,//是否展示
    					position: 'top',
    					textStyle: {
    						fontSize: 12,		     
    						color:'#333',
    					}		                    
    				},
    				color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 1,
                        color: '#FFC15E'
                    }, {
                        offset: 0.3,
                        color: '#FFE297'
                    }]),
    			}
    		},
            data: [110, 490, 320, 450, 490, 320]
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $("div.data-main").css("width","auto");
    $(window).resize(function() {
       myChart.resize();
    });
})
// 近12月优惠券使用趋势图
$(function(){
	// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main5'));
	var dataArr1=['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
	
    // 指定图表的配置项和数据
    var option = {
        grid: {
	    	top:'20',
            left: '0',   //图表距边框的距离
            right: '0',
            bottom: '0',
            containLabel: true
        },
	    xAxis: {
	        type: 'category',
	        /*boundaryGap: false,*/
	        
            axisLabel: {
                textStyle: {
                	color:'#333',
                    fontSize: 12,
				},
            },
            axisTick:{
                show:false  //去掉y轴刻度线
            },
            
            //坐标轴颜色
            axisLine:{
                show:true,
				lineStyle: {
					color: 'rgba(0, 0, 0, 0.45)',
					width: '1'
				}
            },
	        data: dataArr1
	    },
	    yAxis: [
		    {
		    	type: 'value',
		    	min:0,
                max:600,
                interval:200,
		        splitLine: {
		            show: true ,
		            lineStyle: {
		            	color: '#eee',
		            	width: '1'
		            }
		        },
	            axisLabel: {
	            	textStyle: {
	            		color:'#333',
	                    fontSize: 12,
					},
		            
	            },
	            
	            axisTick:{
	                show:false  //去掉y轴刻度线
	            },
		        //坐标轴颜色
	            axisLine:{
	                show:false,
	            },
		    }
	    ],
	    series: [
		{
		    name:'理发店',
		    type:'line',
			smooth: true,
		    itemStyle : {
				normal : {
					barBorderRadius:[2, 2, 0, 0],
					label: {		                       
						show: true,//是否展示
						position: 'top',
						textStyle: {
							fontSize: 12,	
							color:'#333',
						}		                    
					},
					color: '#5B8FF9'
				},
				
			},
			areaStyle: {
				normal: {
					//前四个参数代表位置 左下右上，如下表示从上往下渐变色 紫色到暗蓝色，
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{ offset: 0, color: 'rgba(91, 143, 249, 1)' }, 
							{ offset: 1, color: 'rgba(91, 143, 249, 0)' }
						]
					)
				}
			},
		
		    data: [360, 488, 150, 190, 50, 210, 149, 350, 200, 150,10, 249]
		},
	    {
	        name:'缝纫店',
            type:'line',
			smooth: true,
            itemStyle : {
				normal : {
					barBorderRadius:[2, 2, 0, 0],
					label: {		                       
						show: true,//是否展示
						position: 'top',
						textStyle: {
							fontSize: 12,	
							color:'#333',
						}		                    
					},
					color: 'rgba(28, 148, 154, 1)'
				},
				
			},
			areaStyle: {
				normal: {
					//前四个参数代表位置 左下右上，如下表示从上往下渐变色 紫色到暗蓝色，
					color: new echarts.graphic.LinearGradient(
						0, 0, 0, 1,
						[
							{ offset: 0, color: 'rgba(28, 148, 154, 1)' }, 
							{ offset: 1, color: 'rgba(28, 148, 154, 0)' }
						]
					)
				}
			},

	        data: [110, 49, 250, 400, 450, 110, 49, 250, 100, 450,110, 49]
	    },]
	};
   // 使用刚指定的配置项和数据显示图表。
   myChart.setOption(option);
   $("div.data-main").css("width","auto");
   $(window).resize(function() {
      myChart.resize();
   });
})

